import type { MenuProps } from "antd";
import { Dropdown } from "antd";
import { MenuButton } from "./MenuButton.tsx";
import { useEffect, useState } from "react";
import { SvgIcon } from "../common/SvgIcon.tsx";
import { Pen, PenType } from "@meta2d/core";

export const fromArrows = [
  { icon: "#l-line", value: "" },
  { icon: "#l-from-triangle", value: "triangle" },
  { icon: "#l-from-diamond", value: "diamond" },
  { icon: "#l-from-circle", value: "circle" },
  { icon: "#l-from-lineDown", value: "lineDown" },
  { icon: "#l-from-lineUp", value: "lineUp" },
  { icon: "#l-from-triangleSolid", value: "triangleSolid" },
  { icon: "#l-from-diamondSolid", value: "diamondSolid" },
  { icon: "#l-from-circleSolid", value: "circleSolid" },
  { icon: "#l-from-line", value: "line" },
];

export const toArrows = [
  { icon: "#l-line", value: "" },
  { icon: "#l-to-triangle", value: "triangle" },
  { icon: "#l-to-diamond", value: "diamond" },
  { icon: "#l-to-circle", value: "circle" },
  { icon: "#l-to-lineDown", value: "lineDown" },
  { icon: "#l-to-lineUp", value: "lineUp" },
  { icon: "#l-to-triangleSolid", value: "triangleSolid" },
  { icon: "#l-to-diamondSolid", value: "diamondSolid" },
  { icon: "#l-to-circleSolid", value: "circleSolid" },
  { icon: "#l-to-line", value: "line" },
];
const changeFromArrow = (value: string) => {
  // 画布默认值
  window.meta2d.store.data.fromArrow = value;
  // 活动层的箭头都变化
  if (window.meta2d.store.active != undefined) {
    window.meta2d.store.active.forEach((pen: Pen) => {
      if (pen.type === PenType.Line) {
        window.meta2d.setValue(
          {
            id: pen.id,
            fromArrow: value,
          },
          {
            render: false,
          },
        );
      }
    });
    window.meta2d.render();
  }
};
const changeToArrow = (value: string) => {
  // 画布默认值
  window.meta2d.store.data.toArrow = value;
  // 活动层的箭头都变化
  if (window.meta2d.store.active != undefined) {
    window.meta2d.store.active.forEach((pen: Pen) => {
      if (pen.type === PenType.Line) {
        window.meta2d.setValue(
          {
            id: pen.id,
            toArrow: value,
          },
          {
            render: false,
          },
        );
      }
    });
    window.meta2d.render();
  }
};
export const ThrumDropDown = (props: { type: "from" | "to" }) => {
  const [items, setItems] = useState<MenuProps["items"]>([]);
  const [fromIcon, setFromIcon] = useState("#l-line");
  const [toIcon, setToIcon] = useState("#l-line");
  let ArrowArr: any[] = [];
  useEffect(() => {
    if (props.type === "from") {
      ArrowArr = fromArrows;
    }
    if (props.type === "to") {
      ArrowArr = toArrows;
    }
    ArrowArr.forEach((item) => {
      let obj = {
        key: item.value,
        label: (
          <div>
            <svg
              className="l-icon"
              style={{ width: "2em", height: "2em" }}
              aria-hidden="true"
            >
              <use xlinkHref={item.icon}></use>
            </svg>
          </div>
        ),
      };
      setItems((arr: any) => {
        return [...arr, obj];
      });
    });
    return () => {
      setItems([]);
    };
  }, []);
  const onClick: MenuProps["onClick"] = ({ key }) => {
    if (props.type === "from") {
      let item = fromArrows.find((v) => v.value === key);
      item && setFromIcon(item.icon);
      changeFromArrow(key);
    }
    if (props.type === "to") {
      let item = toArrows.find((v) => v.value === key);
      item && setToIcon(item.icon);
      changeToArrow(key);
    }
  };
  return (
    <>
      <Dropdown menu={{ items, onClick }} arrow>
        <a onClick={(e) => e.preventDefault()}>
          <MenuButton
            arrow
            children={
              <SvgIcon icon={props.type === "from" ? fromIcon : toIcon} />
            }
            title={props.type === "from" ? "起点" : "终点"}
          ></MenuButton>
        </a>
      </Dropdown>
    </>
  );
};
